<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
  <div id="app">

    用户名: <input v-model.lazy.trim="user.name" />

    </br>
    年龄：<input type="text" v-model.number="user.age"   >
    </br>
    描述：<textarea v-model="user.desc" name="" id="" cols="10" rows="2"></textarea>
  </br>
  爱好：
  <input type="checkbox" name="" v-model="user.hobby" value="001"> 旅游
  <input type="checkbox" name="" v-model="user.hobby" value="002"> 看电影
</br>
性别：
<input type="radio" name="" v-model="user.sex" value="1">
男
<input type="radio" name="" v-model="user.sex" value="2">
女
</br>
城市：
<select v-model="user.city" multiple>
  <option disabled value="" selected>请选择</option>
  <option v-bind:value="{name:'taiyuan',num:800}">太原</option>
  <option value="beijing">北京</option>
  <option value="shanghai">上海</option>
  <option value="hangzhou">杭州</option>
</select>

<input
  type="checkbox"
  v-model="user.toggle"
  true-value="yes"
  false-value="no"
>
    <button @click="handleSubmit()">提交</button>

  </div>

  <script>

    var vm = new Vue({
      data: {
        user: {
          toggle:'no',
          name: '',
          age:20,
          desc:"",
          hobby:['001'],
          sex:'1',
          city:['taiyuan']
        }
      },
      methods: {
        handleSubmit() {
          console.log(JSON.stringify(this.user))
        }
      },
      el: "#app"
    })
  </script>

</body>

</html>